<template>
  <view
    class="bg-gradient-to-br from-[#e3f2fd] to-[#f0f8ff] text-[#333] leading-[1.6] min-h-screen pb-[20rpx]"
  >
    <view class="container max-w-[750rpx] mx-auto">
      <PageHeader title="" :showBack="true" :onlyBack="true" />

      <!-- 页面标题 -->
      <view
        class="sticky top-0 z-[2] text-center py-[30rpx] px-[20rpx] bg-gradient-to-r from-[#2196F3] to-[#21CBF3] rounded-b-[20rpx] shadow-[0_15rpx_30rpx_rgba(33,150,243,0.25)] relative overflow-hidden mb-[30rpx] text-white"
      >
        <view
          class="absolute top-0 left-0 w-full h-[5rpx] bg-[rgba(255,255,255,0.5)]"
        ></view>
        <view
          class="page-title text-[36rpx] mb-[15rpx] flex items-center justify-center gap-[15rpx]"
        >
          <IconFont name="icon-crown" />
          <text>高薪优质岗位</text>
        </view>
        <view
          class="page-subtitle text-[20rpx] max-w-[600rpx] mx-auto mb-[25rpx] opacity-[0.95]"
        >
          精选高薪、高福利、高发展潜力的优质岗位，助您实现职业飞跃
        </view>

        <view
          class="stats flex justify-center gap-[40rpx] mt-[25rpx] flex-wrap"
        >
          <view
            v-for="stat in stats"
            :key="stat.id"
            class="stat-item text-center p-[15rpx] bg-[rgba(255,255,255,0.15)] rounded-[15rpx] backdrop-blur-[5rpx] min-w-[150rpx]"
          >
            <view class="stat-value text-[32rpx] font-bold mb-[5rpx]">{{
              stat.value
            }}</view>
            <view class="stat-label text-[20rpx] opacity-[0.9]">{{
              stat.label
            }}</view>
          </view>
        </view>
      </view>

      <!-- 工作列表 -->
      <view class="mx-[20rpx]">
        <!-- <view
          class="section-header p-[25rpx] bg-gradient-to-r from-[#2196F3] to-[#21CBF3] text-white flex items-center gap-[15rpx]"
        >
          <IconFont name="icon-bolt" />
          <view class="section-title text-[28rpx] font-bold">最新高薪岗位</view>
        </view> -->

        <view class="job-list">
          <view
            v-for="(job, index) in jobs"
            :key="job.id"
            class="bg-white rounded-[24rpx] p-[32rpx] shadow-sm border border-[#f0f0f0] relative flex flex-col transition-all duration-300 mb-[24rpx]"
            @tap="handleJobClick(job.id)"
          >
            <view
              class="absolute top-[20rpx] right-[25rpx] text-[24rpx] px-[16rpx] py-[8rpx] rounded-[16rpx] font-medium bg-[#ffebee] text-[#F44336]"
            >{{ job.badge }}</view>

            <view class="job-content flex-1">
              <view
                class="job-title text-[32rpx] text-[#2196F3] mb-[12rpx] font-bold"
              >
                {{ job.title }}
              </view>
              <view
                class="job-company text-[28rpx] text-[#666] mb-[16rpx] flex items-center gap-[8rpx]"
              >
                <IconFont
                  font-class-name="iconfont"
                  class-prefix="icon"
                  name="building"
                  size="12"
                />
                <text>{{ job.company }}</text>
              </view>
              <view
                class="job-pay text-[32rpx] font-bold text-[#ff5722] mb-[16rpx]"
              >
                {{ job.pay }}
              </view>

              <view class="job-details flex gap-[25rpx] mb-[16rpx] flex-wrap">
                <view
                  v-for="(detail, i) in job.details"
                  :key="i"
                  class="detail-item flex items-center gap-[8rpx] text-[#666] text-[26rpx]"
                >
                  <IconFont :name="detail.icon" v-if="detail.icon" />
                  <text>{{ detail.value }}</text>
                </view>
              </view>

              <view class="job-desc text-[#666] text-[28rpx] mb-[20rpx] leading-[1.6]">
                {{ job.desc }}
              </view>

              <view class="job-tags flex flex-wrap gap-[12rpx] mb-[20rpx]">
                <view
                  v-for="(tag, i) in job.tags"
                  :key="i"
                  v-show="tag"
                  class="tag bg-[#e3f2fd] text-[#2196F3] px-[16rpx] py-[6rpx] rounded-[10rpx] text-[24rpx] font-medium"
                >
                  {{ tag }}
                </view>
              </view>

              <view class="flex justify-end gap-[12rpx]">
                <nut-button
                  type="info"
                  size="small"
                  class="text-[28rpx] rounded-[20rpx]"
                  @click="handleJobClick(job.id)"
                >
                  查看详情
                </nut-button>
                <nut-button
                  type="primary"
                  size="small"
                  class="text-[28rpx] rounded-[20rpx] bg-[#2196F3] border-[#2196F3]"
                  @click.stop="handleApplyJob(job.id)"
                >
                  立即申请
                </nut-button>
              </view>
              
            </view>
          </view>
        </view>
      </view>
      <!-- 加载更多按钮 -->
      <view class="flex justify-center mt-[80rpx] mb-[30rpx]">
        <nut-button
          size="normal"
          type="primary"
          :loading="isLoading"
          :disabled="isLoading || noMore"
          @click="loadMore"
          class="w-[300rpx] bg-[#2196F3] border-[#2196F3] rounded-[24rpx] py-[16rpx] text-[28rpx] font-medium shadow-sm transition-all duration-300"
        >
          {{ noMore ? "没有更多了" : "加载更多" }}
        </nut-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { post } from "../../utils/request";
// import { Button as nutButton } from '@nutui/nutui-taro'

// 统计数据
const stats = ref([
  // { id: 1, value: "¥8K-35K", label: "月薪范围" },
  // { id: 2, value: "86%", label: "五险一金" },
  // { id: 3, value: "124", label: "在招岗位" },
]);

// 分页参数
const pageNo = ref(1); // 当前页码
const pageSize = ref(10); // 每页条数
const isLoading = ref(false); // 加载中状态
const noMore = ref(false); // 是否没有更多数据



// 特色功能数据
const features = ref([
  {
    id: 1,
    title: "名企直招",
    desc: "世界500强企业、行业龙头公司、知名互联网企业直接招聘",
    icon: "icon-gem",
    btnText: "查看名企",
    btnIcon: "",
  },
  {
    id: 2,
    title: "高薪岗位",
    desc: "月薪15K+优质岗位，高额年终奖，股权激励，绩效奖金",
    icon: "icon-chart-line",
    btnText: "查看高薪",
    btnIcon: "icon-search-dollar",
  },
  {
    id: 3,
    title: "海外机会",
    desc: "海外高薪工作机会，国际化工作环境，跨文化职业发展",
    icon: "icon-globe-asia",
    btnText: "海外职位",
    btnIcon: "icon-plane",
  },
]);

// 工作列表数据
const jobs = ref([
  // {
  //   id: 1,
  //   title: "高级前端工程师",
  //   company: "科技前沿有限公司",
  //   pay: "¥25K-35K·14薪",
  //   badge: "急聘",
  //   icon: "icon-laptop-code",
  //   details: [
  //     { icon: "locationg3", value: "北京·海淀区" },
  //     { icon: "", value: "本科及以上" },
  //     { icon: "", value: "3-5年经验" },
  //   ],
  //   desc: "负责公司核心产品的前端架构设计与开发，优化前端性能，带领前端团队进行技术攻关。要求精通Vue/React框架，有大型项目经验。",
  //   tags: ["五险一金", "年终奖金", "弹性工作", "带薪年假", "股票期权"],
  // },
]);

// 企业数据
const companies = ref([
  { id: 1, name: "腾讯科技", logo: "TX", jobs: 32 },
  { id: 2, name: "阿里巴巴", logo: "AL", jobs: 28 },
  { id: 3, name: "华为技术", logo: "HW", jobs: 45 },
  { id: 4, name: "百度科技", logo: "BD", jobs: 19 },
  { id: 5, name: "京东集团", logo: "JD", jobs: 26 },
  { id: 6, name: "小米科技", logo: "XM", jobs: 21 },
]);

// 底部链接
const footerLinks = ref([
  { id: 1, title: "关于我们" },
  { id: 2, title: "加入我们" },
  { id: 3, title: "隐私政策" },
  { id: 4, title: "用户协议" },
  { id: 5, title: "帮助中心" },
]);

// 返回按钮
const handleBack = () => {
  Taro.showToast({
    title: "返回首页",
    icon: "none",
    duration: 2000,
  });
  // 实际项目中使用：Taro.navigateBack()
};

// 搜索功能
const handleSearch = () => {
  Taro.showToast({
    title: "打开搜索页面",
    icon: "none",
    duration: 2000,
  });
};

// 个人中心
const handleUserCenter = () => {
  Taro.showToast({
    title: "打开个人中心",
    icon: "none",
    duration: 2000,
  });
};

// 特色功能点击
const handleFeatureClick = (title) => {
  Taro.showToast({
    title: `查看${title}相关内容`,
    icon: "none",
    duration: 2000,
  });
};

// 工作卡片点击
const handleJobClick = (id) => {
  Taro.navigateTo({
    url:`/pages-detail/post/recruit/factory-recruitment-detail?id=${id}`
  })
  // Taro.showToast({
  //   title: `查看${title}详情`,
  //   icon: "none",
  //   duration: 2000,
  // });
};

// 申请工作
const handleApplyJob = async (id) => {
  const res = await post('/recruitment/signUp',{
    recruitmentId:id
  })
  if(res.code == 0){
    Taro.showToast({
      title: `您已申请该职位！\n招聘经理将在24小时内与您联系。`,
      icon: "none",
      duration: 3000,
    });
  }
  else{
    Taro.showToast({
      title: res.data,
      icon: "none",
      duration: 2000,
    });
  }
};

// 查看更多企业
const handleViewMoreCompanies = () => {
  Taro.showToast({
    title: "查看更多招聘企业",
    icon: "none",
    duration: 2000,
  });
};

// 企业卡片点击
const handleCompanyClick = (name) => {
  Taro.showToast({
    title: `查看${name}招聘专场`,
    icon: "none",
    duration: 2000,
  });
};

// 底部链接点击
const handleFooterLinkClick = (title) => {
  Taro.showToast({
    title: `打开${title}页面`,
    icon: "none",
    duration: 2000,
  });
};

// 重置分页参数
const resetPagination = () => {
  pageNo.value = 1;
  jobs.value = [];
  noMore.value = false;
};

// 加载更多
const loadMore = () => {
  if (isLoading.value || noMore.value) return;
  pageNo.value++; // 页码+1
  getRecruitmentAll();
};
// 特殊招聘列表
const getRecruitmentAll = async () => {
  // 防止重复请求
  if (isLoading.value || noMore.value) {
    if (noMore.value) {
      Taro.showToast({ title: "没有更多了", icon: "none" });
    }
    return;
  }

  isLoading.value = true; // 开始加载

  try {
    const res = await post("/recruitment/all", {
      recruitmentType: 1,
      status: 0,
      pageNo: pageNo.value,
      pageSize: pageSize.value,
      type: 0,
    });
    console.log("特殊招聘==>", res);
    
    if (res.code === 0) {
      const newItems = res.data.map((item) => ({
        id: item.columns.id,
        title: item.columns.position_name,
        company: item.columns.corporate_name,
        pay: `¥${item.columns.salary_min} - ${item.columns.salary_max}`,
        details: [
          { icon: "locationg3", value: item.columns.location },
          { icon: "", value: item.columns.experience },
        ],
        badge: "急招",
        desc: item.columns.description,
        tags: item.columns.labels?.split(",") || [],
      }));
      
      // 第一页直接赋值，后续页追加数据
      if (pageNo.value === 1) {
        jobs.value = newItems;
      } else {
        jobs.value = [...jobs.value, ...newItems];
      }
      
      // 判断是否还有更多数据（当前页数据小于pageSize则说明没有更多）
      noMore.value = newItems.length < pageSize.value;
    }
  } catch (error) {
    console.error("获取特殊招聘数据失败：", error);
    Taro.showToast({ title: "加载失败", icon: "none" });
  } finally {
    isLoading.value = false; // 结束加载
  }
};
getRecruitmentAll();
</script>
